<template>
	<view>
		<view class="cart-title" v-show="headTailShow">
			<view>阳光西点</view>
			<view @click="clickEditBtn">{{editBtn}}</view>
		</view>

		<!-- 购物车商品列表 -->
		<view class="cart-goods-list">
			<view v-if="!headTailShow">
				<empty-show></empty-show>
			</view>
			<!-- 单个商品 -->
			<view class="cart-goods-item" v-for="(item,i) in cartList" :key="item._id" v-else>
				<!-- 选中/未选 小圆圈 -->
				<view class="circle" :class="{checked:editBtn=='编辑'&&item.checked||editBtn=='完成'&&editList[i].checked}"
					@click="toggleChecked(item)">
					<uni-icons type="checkmarkempty" size="15" color="#fff"></uni-icons>
				</view>
				<view class="goods-item-main">
					<cart-goods :buyData="item" @uploadCartList="getCartList"></cart-goods>
				</view>
			</view>
		</view>

		<!-- 底部全选操作 -->
		<view class="cart-total" v-show="headTailShow">
			<view style="display: flex;">
				<view class="circle" :class="{checked:editBtn=='编辑'&&checkedAll||editBtn=='完成'&&editAll}"
					@click="toggleCheckedAll">
					<uni-icons type="checkmarkempty" size="15" color="#fff"></uni-icons>
				</view>
				<text style="font-size: 26rpx;margin-left: -15rpx;">全选</text>
			</view>
			<view class="cart-total-right">
				<view class="cart-total-info" v-show="editBtn=='编辑'">
					<view>合计: <text class="cart-total-price">￥{{totalPrice}}</text></view>
					<view style="color: #666;font-weight: 400;">不含运费</view>
				</view>
				<button class="total-btn" v-if="editBtn=='编辑'" :disabled="!totalPrice"
					@click="gotoConfrimOrder">结算</button>
				<button class="total-btn" v-else :disabled="delDisabled" @click="delGoods">删除</button>
			</view>
		</view>

		<view>
			<uni-popup ref="popup" type="bottom">
				<add-cart :isCartPage="true" :goodsData="goodsData" :active="active" @handleSize='handleActive'
					@clickOkBtn="changeSizeOk">
				</add-cart>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [], // 购物车商品列表
				editBtn: '编辑', // 顶部右上角按钮的值
				editList: [], // 将要编辑商品的选中信息
			};
		},
		computed: {
			checkedAll() { // 购物车结算全选按钮的值
				let result = false;
				if (this.cartList.length) {
					result = this.cartList.every(item => item.checked);
				}
				return result
			},
			totalPrice() { // 选中商品总价
				let checkedPrice = this.cartList.map(item => {
					return item.checked ? item.price * item.buy_num : 0
				});
				return checkedPrice.reduce((preVal, currVal) => preVal + currVal, 0);
			},
			editAll() { // 编辑的全选按钮
				let result = false;
				if (this.editList.length) {
					result = this.editList.every(item => item.checked);
				}
				return result
			},
			delDisabled() { // 控制删除按钮是否禁用
				return !this.editList.find(item => item.checked)
			},
			headTailShow() { // 购物车为空时展示空图片
				let value = false;
				if (this.cartList.length > 0) {
					value = true;
				}
				return value;
			}
		},
		watch: {
			cartList(newVal, oldVal) {
				if (newVal.length != oldVal.length) {
					this.eachEditList();
				}
			},
		},
		onLoad() {
			this.getCartList();
		},
		onShow() {
			this.getCartList();
		},
		methods: {
			// 获取购物车商品列表
			async getCartList() {
				let {
					statusCode,
					data
				} = await uni.$http.reqCartGoodsList(this.user_id);
				if (statusCode == 200) {
					this.cartList = data;
				}
			},
			// 改变单个商品选中状态
			async toggleChecked({
				_id,
				checked
			}) {
				if (this.editBtn == '编辑') {
					await uni.$http.reqCartCheckedOne(_id, !checked);
					this.getCartList();
				} else {
					this.editList.forEach((item, index) => {
						if (item._id == _id) {
							this.$set(this.editList[index], 'checked', !item.checked);
						}
					})
				}
			},
			async toggleCheckedAll() { // 全选 or 全不选
				if (this.editBtn == '编辑') {
					await uni.$http.reqCartCheckedAll(this.user_id, this.checkedAll);
					this.getCartList();
				} else {
					this.eachEditList(!this.editAll);
				}
			},
			delGoods() { // 删除选中商品
				let that = this;
				uni.showModal({
					// title: '确认删除选中商品吗？',
					content: '确认删除选中商品吗？',
					success: async function(res) {
						if (res.cancel) { // '用户点击取消'
							return
						} else if (res.confirm) { // 用户点击确定
							let delArr = [];
							that.editList.forEach(item => {
								if (item.checked) delArr.push(item._id);
							})
							await uni.$http.reqDelGoods(delArr);
							that.getCartList();
						}
					}
				});

			},
			clickEditBtn() { // 编辑 or 完成
				if (this.editBtn == '编辑') {
					this.editBtn = '完成'
				} else {
					this.eachEditList();
					this.editBtn = '编辑';
				}
			},
			// 点击结算前往确认订单页面
			gotoConfrimOrder() {
				this.$store.commit('SET_PD_ORDER', this.cartList);
				uni.navigateTo({
					url: '/subpkg/verify-order/verify-order'
				})
			},
			eachEditList(checked = false) { // 遍历编辑选中圆圈更改状态
				this.editList = this.cartList.map(item => {
					return {
						_id: item._id,
						checked
					};
				})
			},
		}
	}
</script>

<style lang="scss">
	.cart-title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
	}

	.cart-goods-list {
		padding-bottom: 100rpx;
	}

	.cart-goods-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;

		.goods-item-main {
			flex: 1;
		}
	}

	.circle {
		width: 30rpx;
		height: 30rpx;
		margin-right: 30rpx;
		text-align: center;
		line-height: 30rpx;
		border: 1px solid $my-tawny;
		border-radius: 50%;
	}


	.checked {
		background-color: $my-tawny;
	}

	.cart-total {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 90rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #ebedf0;
		background-color: #fff;
	}

	.cart-total-right {
		display: flex;
		align-items: center;
		font-weight: 700;

		.cart-total-info {
			padding-right: 20rpx;
			font-size: 26rpx;

			.cart-total-price {
				color: $my-tawny;
			}
		}

		.total-btn {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: #fff;
			border-radius: 35rpx;
			background-color: $my-tawny;

			&::after {
				border: 0;
			}
		}
	}
</style>
